<template>
    <el-container direction="vertical">
        <el-form :model="merchantForm" :rules="rules" ref="merchantForm" label-width="auto" class="demo-ruleForm merchantForm">
            <el-form-item label="商家名称" prop="merchantName">
                <el-input prefix-icon="el-icon-eleme" v-model="merchantForm.merchantName" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商家经营人" prop="bossName">
                <el-input prefix-icon="el-icon-user" v-model="merchantForm.bossName" clearable  placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="商家类型" prop="merchantType">
              <el-input prefix-icon="el-icon-collection-tag" v-model="merchantForm.merchantType" clearable placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('merchantForm')">添加</el-button>
                <el-button @click="resetForm('merchantForm')">重置</el-button>
                <el-button type="info" @click="$router.go(-1)">返回</el-button>
            </el-form-item>
        </el-form>
    </el-container>
</template>

<script>
import Qs from 'qs'
export default {
    name: "AddMerchantPage",
    data(){
      return{
        merchantForm:{
          merchantName:'',
          bossName:'',
          merchantType: ''
        },
        rules:{
          merchantName:[
            { required:true,message:'请输入商家名称',trigger:'blur'}
          ],
          bossName:[
            { required:true,message:'请输入商家经营人',trigger:'blur'}
          ],
          merchantType:[
            { required:true,message:'请输入商家类型',trigger:'blur'}
          ],
        }
      }
    },
    methods:{
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = Qs.stringify(this.merchantForm);
            this.$http.post('/merchant/add',params).then((response)=>{
                if(response.status === 200){
                  if(response.data.code === 10000){
                    this.$notify({
                      title: '成功',
                      message: "您的店铺ID是"+response.data.data.id,
                      duration: 1000
                    })
                  }else{
                    this.$notify.error({
                      title: '错误',
                      message: response.data.msg,
                      duration: 1000
                    });
                  }
                }else{
                  this.$notify.error({
                    title: '错误',
                    message: response.status + response.statusText,
                    duration: 1000
                  });
                }
              })
          }
        });
      },
      resetForm(formName){
        this.$refs[formName].resetFields();
      }
    }
}
</script>

<style scoped>

</style>
